const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  entry:'./src/main.ts',
  mode: isProd ? 'production' : 'development',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'js/[name].js',
    chunkFilename: "js/[name].chunk.js", 
    clean:true,
    environment:{
      arrowFunction:false
    }
  },
  module:{
    rules:[
      {
        test:/\.ts$/,
        use:[
          {
            loader:'babel-loader',
            options:{
              "presets": [
                ["@babel/preset-env", {
                "useBuiltIns": "usage",
                "corejs": 3,
                "targets":{
                  "chrome":58
                }
              }]
              ],
              cacheDirectory: true, // 开启babel编译缓存
              cacheCompression: false, // 缓存文件不要压缩
            }
          },
          'ts-loader'
        ],
        exclude:/node_modules/
      },
      {
        test:/\.less$/,
        use:[
          miniCssExtractPlugin.loader,
          'css-loader',
          {
            loader:'postcss-loader',
            options:{
              postcssOptions:{
                plugins:[
                  "postcss-preset-env"
                ]
              }
            }
          },
          'less-loader'
        ]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname,'public/index.html')
    }),
    new miniCssExtractPlugin({
      filename:'css/[name].css'
    })
  ],
  resolve:{
    extensions: [".ts", ".js", ".json"],
    alias: {
      // 路径别名
      "@": path.resolve(__dirname,'src'),
    },
  },
  devServer:{
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  optimization:{
    // 代码分割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行分割
      // 其他内容用默认配置即可
    },
  }
}